<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  

    <title>高德地图</title>

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=a58885e6e26d98a22883133ec365d1ed&plugin=AMap.Scale,AMap.ToolBar,AMap.ControlBar">
    </script>

    <style type="text/css">  
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    
    </style> 

    
</head>
<body>
    <!-- 展示地图 -->
    <div id="container"></div> 
</body>

<script type="text/javascript">
    // 设置安全密钥
    window._AMapSecurityConfig = {
        securityJsCode: 'cd329a5655dc4fd98e15f3595737d963'
    };
    
    // 初始化地图函数
    function initMap() {
        try {
            // 检查高德地图API是否加载成功
            if (typeof AMap === 'undefined') {
                console.error('高德地图API加载失败');
                document.getElementById('container').innerHTML = '<div style="text-align:center;padding:50px;color:#999;">地图加载失败，请检查网络连接</div>';
                return;
            }
            
            console.log('开始初始化高德地图...');
            
            // 初始化高德地图
            var map = new AMap.Map('container', {
                zoom: 15, // 缩放级别
                center: [116.952182, 39.176618], // 中心坐标
                viewMode: '2D' // 2D模式
            });
            
            // 添加地图控件
            map.addControl(new AMap.Scale());
            map.addControl(new AMap.ToolBar());
            
            // 添加标记点
            var marker = new AMap.Marker({
                position: [116.952182, 39.176618],
                title: '指定位置'
            });
            
            // 将标记添加到地图
            map.add(marker);
            
            // 地图加载完成事件
            map.on('complete', function() {
                console.log('高德地图加载完成');
            });
            
            console.log('高德地图初始化成功');
            
        } catch (error) {
            console.error('地图初始化错误:', error);
            document.getElementById('container').innerHTML = '<div style="text-align:center;padding:50px;color:#f56c6c;">地图初始化失败: ' + error.message + '</div>';
        }
    }
    
    // 等待页面和API加载完成
    window.onload = function() {
        console.log('页面加载完成，准备初始化地图');
        // 延迟执行以确保API完全加载
        setTimeout(initMap, 500);
    };
</script>
</html>